import { FC } from 'react';
import {
  Card,
  Form,
  Input,
  InputNumber,
  Button,
  Radio,
  DatePicker,
} from 'antd';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
/* eslint-enable no-template-curly-in-string */

const Index: FC = () => {
  const onFinish = (values: any) => {
    // console.log(values);
    // console.log(values.user.date.format('llll'));
    console.log(new Date(values.user.date).getTime());
  };
  return (
    <>
      <Card title="注册表单">
        <Form
          {...layout}
          name="nest-messages"
          onFinish={onFinish}
          validateMessages={validateMessages}
          initialValues={{ user: { age: 3 } }}
        >
          <Form.Item
            name={['user', 'name']}
            label="Name"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={['user', 'email']}
            label="Email"
            rules={[{ type: 'email' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={['user', 'age']}
            label="Age"
            rules={[{ type: 'number' }]}
          >
            <InputNumber min={1} max={10} />
          </Form.Item>
          <Form.Item label="性别" name={['user', 'sex']}>
            <Radio.Group>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="生日" name={['user', 'date']}>
            <DatePicker />
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </>
  );
};
export default Index;
